<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Starter</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/css/AdminLTE.css">
    <link rel="stylesheet" href="/css/skins/skin-blue.min.css">

    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="/js/plugins/datepicker/datepicker3.css">


    <!-- jQuery 2.2.3 -->
    <script src="/js/jquery/1.11.1/jquery.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/js/app.min.js"></script>
    <![endif]-->

    <script>

        $(document).ready(function(){

            $("#member-detail-box").empty();
            $("#member-detail-box").load("/member/memberDetail");

        });
    </script>
</head>
<body>
<div>
    <!-- Content Header (Page header) -->
    <section class="content-header">
    <#--main标题-->
        <h1>
            客户健康状况
        </h1>
    <#--右侧快捷导航栏-->
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 客户管理</a></li>
            <li class="active">健康状况</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">

        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">请选择客户</h3>
            </div>
            <div class="box-body">
                <div class="row">

                    <div class="col-md-2">
                        <select id="selectMemberId" class="form-control select2" style="width: 100%;" onchange="chengeMemberHealth()">
                        <#list memberList as m>
                            <#if m.memberId==member.memberId>
                                <option value=${m.memberId} selected="true">${m.memberName}</option>
                            <#else>
                                <option value=${m.memberId}>${m.memberName}</option>
                            </#if>


                        </#list>
                        </select>

                    </div>
                    <div hidden="hidden">
                        <input id="memberId" type="number" value="${member.memberId}">
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div id="member_health" class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">疾病史、药物过敏史</h3>
                    </div>
                    <!-- general form elements -->
                <#--col-lg-6-->
                    <div id="member-detail-box" class="box-body">
                        <textarea id="diseasesHistory" class="form-control" rows="3" placeholder="Enter ..." disabled>${member.diseasesHistory}</textarea>
                    </div>
                    <div class="box-body">
                        <button id="addHealthIndex" class="btn btn-info pull-left"
                                onclick="editDiseasesHistory()">编辑
                        </button>
                        <button id="submitMedical" class="btn btn-info pull-right"
                                onclick="updateDiseasesHistory()">更新
                        </button>
                    </div>
                </div>
                <#--<div class="col-xs-12">-->
                    <div class="box box-primary">
                        <div class="box-header">
                            <h3 class="box-title">日常健康指数</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="health_index" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th style="display:none">id</th>
                                    <th style="display:none">memberId</th>
                                    <th style="display:none">isupdate</th>
                                    <th>日期(YYYY-MM-DD)</th>
                                    <th>血压(低压)</th>
                                    <th>血压(高压)</th>
                                    <th>脉搏</th>
                                    <th>血糖</th>
                                    <th>血脂(总胆固醇)</th>
                                    <th>血脂(甘油三酯)</th>
                                    <th>尿糖</th>
                                    <th>尿蛋白</th>
                                </tr>
                                </thead>

                                <tbody>
                                <#list healthIndexs as healthIndex>
                                <tr>
                                    <td style="display: none">${healthIndex.id}</td>
                                    <td style="display: none">${healthIndex.memberId}</td>
                                    <td style="display: none">0</td>
                                    <td>${healthIndex.logday?date}</td>
                                    <td>${healthIndex.bloodPressure_L}</td>
                                    <td>${healthIndex.bloodPressure_H}</td>
                                    <td>${healthIndex.pulse}</td>
                                    <td>${healthIndex.bloodSugger}</td>
                                    <td>${healthIndex.bloodFatTC}</td>
                                    <td>${healthIndex.bloodFatTG}</td>
                                    <td>${healthIndex.urineSugar}</td>
                                    <td>${healthIndex.urineProtein}</td>
                                </tr>
                                </#list>

                            </table>

                        </div>
                        <div class="box-body">
                            <button id="addHealthIndex" class="btn btn-info pull-left"
                                    onclick="addHealthIndex()">新增记录
                            </button>
                            <button id="submitMedical" class="btn btn-info pull-right"
                                    onclick="submitHealthIndex()">提交
                            </button>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">当前使用药物</h3>
                        </div>
                        <!-- general form elements -->
                    <#--col-lg-6-->

                        <div class="box-body">
                            <table id="medical" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th style="display:none">id</th>
                                    <th style="display:none">memberId</th>
                                    <th style="display:none">isupdate</th>
                                    <th>药名</th>
                                    <th>剂量描述</th>
                                    <th>服用开始日期</th>
                                    <th>服用(预计)结束日期</th>
                                    <th>治疗目的</th>

                                </tr>
                                </thead>

                                <tbody>
                                <#list medicalList as medical>
                                <tr>
                                    <td style="display: none">${medical.id}</td>
                                    <td style="display: none">${medical.memberId}</td>
                                    <td style="display: none">0</td>
                                    <td>${medical.medicalName}</td>
                                    <td>${medical.dosage}</td>
                                    <td>${medical.startDay}</td>
                                    <td>${medical.endDay}</td>
                                    <td>${medical.target}</td>
                                </tr>
                                </#list>
                                <tfoot>

                                </tfoot>
                            </table>
                        </div>
                        <div class="box-body">
                            <button id="addMedical" class="btn btn-info pull-left"
                                    onclick="addMedical()">新增药物
                            </button>
                            <button id="subminMedical" class="btn btn-info pull-right"
                                    onclick="submitMedical()">提交
                            </button>
                        </div>


                        <#--</div>-->
                    </div>
                <#--</div>-->
        </div>
    </section>

</div>
<!-- Content Wrapper. Contains page content -->

<!-- jQuery 2.2.3 -->
<script src="/js/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/js/bootstrap/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="/js/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/js/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- bootstrap datepicker -->
<script src="/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script>
//    $('#example2').DataTable({
//        "paging": true,
//        "lengthChange": false,
//        "searching": false,
//        "ordering": true,
//        "info": true,
//        "autoWidth": false
//    });

    $('#datepicker').datepicker({
        autoclose: true
    });
    $('#checkInDay').datepicker({
        autoclose: true
    });


    var input = document.createElement("input");
    input.type="text" ;
    input.placeholder='请双击输入内容';

    //得到当前的单元格
    var currentCell ;

function editCell(event)
{

    //dom创建文本框

    if(event==null)
    {
        currentCell=window.event.srcElement;
    }
    else
    {
        currentCell=event.target;
    }
    if (currentCell.innerHTML!='请双击输入内容'){
        input.value=currentCell.innerHTML;
    }else {
        input.value='';
    }
    //根据Dimmacro 的建议修定下面的bug 非常感谢
    if(currentCell.tagName=="TD"){

        currentCell.parentElement.children[2].innerText='1';
        //用单元格的值来填充文本框的值
        if (currentCell.innerHTML!='请双击输入内容'){
            input.value=currentCell.innerHTML;
        }
        //当文本框丢失焦点时调用last
        input.onblur=last;
        input.ondblclick=last;
        currentCell.innerHTML="";
        //把文本框加到当前单元格上.
        currentCell.appendChild(input);
        //根据liu_binq63 的建议修定下面的bug 非常感谢
        input.focus();

    }
}

function last()
{
    if (input.value==''){
        currentCell.innerHTML = '请双击输入内容';
    } else {
        //充文本框的值给当前单元格
        currentCell.innerHTML = input.value;
    }

}
    //最后为表格绑定处理方法.
    document.getElementById("medical").ondblclick=editCell;
    document.getElementById("health_index").ondblclick=editCell;
</script>
</body>
</html>
